<template>
    <figure class="single-course-block" @click="toCourseId(item.id)">
        <img :src="item.imagePath" width="280px" height="160px">
        <figcaption>{{ item.name }}</figcaption>
        <span>共{{ item.videoCount }}课时</span>
        <p>{{ item.description}}</p>
    </figure>
</template>

<script>
export default {
    name:"educationItem",
    props:['item'],
    data(){
        return{
           
        }
    },
    methods:{
        toCourseId(id){
            this.$router.push({path:`/education/${id}`})
        }
    },
}
</script>


<style lang="scss" scoped>
    .single-course-block{
        margin: 20px 35px;
        padding: 20px;
        width:320px;
        height: 320px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(215, 217, 229, 1);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-wrap: nowrap;

        &:hover{
            cursor: pointer;
            background-color: #f7f7f7;
        }

        figcaption{
            font-size:16px;
            height: 30px;
            font-weight:600;
            color:rgba(77,90,106,1);
            overflow: hidden;
            text-overflow: ellipsis;
        }

        p{
            height: 18px;
            font-size:12px;
            font-weight:400;
            color:rgba(153,153,153,1);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
</style>